<template>
	<view class="content">
		<uni-nav-bar color="#000" :fixed="true" background-color="#fff" status-bar left-icon="left" title="门票列表" @clickLeft="back" />
		
		<image :src="data.img" mode="widthFix" style="width: 100%"></image>
		
		<view class="cinema-list" v-for="(value,index) in data.dataList" :key="index" @click="toBuy(value.id)">
			<view class="img">
				<image :src="value.cover_img"></image>
			</view>
			<view style="flex: 1">
				<view class="cinema-name">{{value.name}}</view>
				<view class="cinema-address-item">
					<view class="address-text">{{value.ticket_address}}</view>
					<view class="distance" v-if="value.step">{{value.step}}km</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { useCartStore } from '@/store/cart.js';
import { goodsList } from '@/request/api/vip.js';

import { reactive, onMounted } from "vue";

const store = useCartStore();

const data = reactive({
	img: '',
	dataList:[
	]
})

onLoad((e) => {
	data.img = e.img;
	getAddress()
});

// 跳转购买
const getDataUrl = (id) => {
	uni.navigateTo({
		url: `/pages/vip/buyticket?id=${id}`
	})
}

// 门票列表
const getDetailData = async () => {
	const resultData = await goodsList({ city: store.address.city });
	resultData.data.list.map(item => {
		item.step = distance( item.lng, item.lat, store.address.location.lat, store.address.location.lng);
	});
	console.log(resultData.data.list)
	data.dataList = resultData.data.list;
}

const getAddress = () => {
	if (store.address) { 
		getDetailData();
		return 
	};
	//获取定位
	uni.getLocation({
		type: 'gcj02',
		success(res) {
			let lat = res.latitude;
			let lng = res.longitude;
			let key = 'KN3BZ-2A3WW-COARS-3K4IR-YV5N7-ZJFNM';  //申请地址：https://lbs.qq.com/dev/console/application/mine
			uni.request({
				url:'https://apis.map.qq.com/ws/geocoder/v1/?location='+lat+','+lng+'&key='+key,
				method:"GET",
				success(ress) {
					let data = ress.data; //获取到所有定位的数据
					let CityName = ress.data.result.address_component.city;
					
					let address = {
						city: CityName,
						location: { 
							lat: ress.data.result.location.lat,
							lng: ress.data.result.location.lng
						}
					}
					uni.setStorage({
						key:'City_Name',
						data:CityName
					});
					//将值赋给首页
					console.log(data)
					store.setAddress(address);
					
					getDetailData();
				},
				fail() {
					uni.showToast({
						'title':'对不起，数据获取失败！',
						'icon':'none'
					})
				}
			})
		},
		fail(res) {
			console.log(res)
			uni.showToast({
				'title':'对不起，获取位置失败！',
				'icon':'none'
			})
		}
	})
}


// 返回
const back = () => {
	uni.navigateBack({
		delta: 1
	})
}

const toBuy = (id) => {
	uni.navigateTo({
		url: `/pages/vip/buyticket?id=${id}`
	})
}


const distance = (la1, lo1, la2, lo2) => {
	console.log(la1, lo1, la2, lo2)
    var La1 = la1 * Math.PI / 180.0;
    var La2 = la2 * Math.PI / 180.0;
    var La3 = La1 - La2;
    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
    s = s * 6378.137;
    s = Math.round(s * 10000) / 10000;
    s = s.toFixed(2);
    return s;
}
</script>


<style lang="scss" scoped>
	.cinema-list{
		margin: 0rpx 32rpx;
		margin-top: 30rpx;
		border-bottom: 2rpx solid #DFE0E2;
		padding: 32rpx 0rpx 40rpx 0rpx;
		display: flex;
		align-items: center;
		.img {
			padding-right: 20rpx;
			image {
				width: 100rpx;
				height:100rpx;
				border-radius: 10rpx;
			}
		}
		.cinema-name{
			color: #2D3039;
			font-size: 32rpx;
			font-weight: 550;
		}
		.cinema-address-item{
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			.address-text{
				color: #636775;
				font-size: 24rpx;
				width: 78%;
			}
			.distance{
				color: #636775;
				font-size: 28rpx;
			}
		}
	}
</style>